<template>
  <div>
    <h4>@vue-office/pdf 推荐</h4>
    <button @click="getFile">获取远程</button>
    <input type="file" accept=".pdf" @change="previewFile" />
    <vue-office-pdf :src="src" style="height: 600px; width: 600px" />
  </div>
</template>

<script setup lang="ts">
import VueOfficePdf from '@vue-office/pdf'
import { ref } from 'vue'
/* 微软预览
 */
// 文件链接
const docx = 'https://kdocs.cn/l/cv9yrq2GB8uk'
// 预览链接
const officeurl = ref<string>('')
// 分享
const shareOffice = () => {
  navigator.clipboard.writeText(officeurl.value).then(() => {
    alert('复制成功')
  })
}
/* pdf.js
 */

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value =
    'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
}
</script>

<style lang="scss" scoped>
.iframeClass {
  width: 100%;
  height: 400px;
  border: 1px solid red;
}
</style>
